<script setup>
import { computed, onMounted, ref, watchEffect } from "vue"


const input = ref('')
const inputWt = ref(0)
const explainVisible = ref(false)
const weeks = ref('')
const days = ref('')
const inputDate = computed({
   get(){
    return input.value || localStorage.getItem('timePoint')
   },
   set(val){
     input.value = val;
     localStorage.setItem('timePoint', val);
   }
 })
 const inputWeight = computed({
    get(){
    return inputWt.value || localStorage.getItem('weightPoint');
   },
   set(val){
     inputWt.value = val;
     localStorage.setItem('weightPoint', val);
   }
 })

 watchEffect(() => {
    const historicDate = new Date(inputDate.value);
    const currentDate = new Date();
    if(!inputDate.value || isNaN(historicDate.getTime())){
      weeks.value = 0;
      days.value = 0;
    } else {
        const millisecondsDiff = currentDate - historicDate;
        weeks.value = Math.floor(millisecondsDiff / (1000 * 60 * 60 * 24 * 7));
        days.value = Math.floor((millisecondsDiff % (1000 * 60 * 60 * 24 * 7)) / (1000 * 60 * 60 * 24));
    }
 })

 const lowWeight = computed(() => {
   let value = weeks.value;
   if(value < 14) return 0
   if(value >= 14 && value < 40) return 0.3 * (value - 13)
   if(value >= 40) return 0.3 * (40 - 13)
 })
 const largeWeight = computed(() => {
   let value = weeks.value;
   if(value < 14) return 0
   if(value >= 14 && value < 40) return 0.52 * (value - 13)
   if(value >= 40) return 0.52 * (40 - 13)
 })
 const nowWeight = computed(() => {
   if(!inputWeight.value)return [0, 0];
   try{
    let low = (parseFloat(inputWeight.value) + lowWeight.value).toFixed(1)
    let high = (parseFloat(inputWeight.value) + largeWeight.value).toFixed(1)
    return [low, high]
   }catch(e){
     return [0, 0]
   }
 })

</script>

<template>
  <header>
    <div style="text-align:left;margin-bottom: 20px" @click="explainVisible = !explainVisible">
      名词解释
      <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1506" width="512" height="512">
        <path v-if="!explainVisible" d="M781.963636 495.709091l-418.909091-323.490909c-20.945455-16.290909-37.236364-9.309091-37.236363 16.290909v646.981818c0 25.6 16.290909 32.581818 37.236363 16.290909l418.909091-323.490909c11.636364-9.309091 11.636364-23.272727 0-32.581818z" fill="#A8ABB0" p-id="1507"></path>
        <path v-else d="M854.109091 316.509091l-323.490909 418.909091c-9.309091 11.636364-25.6 11.636364-34.909091 0l-323.490909-418.909091c-16.290909-20.945455-9.309091-37.236364 16.290909-37.236364h646.981818c25.6 0 32.581818 16.290909 18.618182 37.236364z" fill="#A8ABB0" p-id="1665"></path>
      </svg>

    </div>
    <div style="text-align:left;margin-bottom: 20px" v-show="explainVisible">
      <p>本计算方法采用正常体重的BMI进行计算，计算方法参考<a target="_blank" href="http://www.nhc.gov.cn/fzs/s7848/202208/2c1c388fcd0c47c58630e5f971ebb468/files/3e00de62d92749fbbe749427a5ab75ef.pdf">妊娠期妇女体重增长推荐值标准</a></p>
      <p>妊娠前体重: 妊娠之前三个月内的平均体重</p>
      <p>分娩前体重: 分娩前一周内最后一次称量的体重</p>
      <p>妊娠期: 从末次月经的第一日开始计算，约为280日（40周）</p>
      <p>妊娠早期: 妊娠未达14周</p>
      <p>妊娠中期: 妊娠第14周～27+6周</p>
      <p>妊娠晚期: 妊娠第28周及其后</p>
      <p>体质指数BMI：计算方法是体重（kg）与身高（m）的平方的比值</p>
      <p>体重测量：测量应在清晨、空腹、排泄完毕的状态下进行，室温25℃左右</p>
      <img style="width: 100%" src="./assets/BMI.png">
    </div>

    
  </header>

  <main class="container">
        <div class="input-wrap">
          <div class="flex-item">
            <label for="historicDate">末次月经时间:</label>
            <input type="date" v-model="inputDate">
          </div>
          <div class="flex-item">
            <label for="historicWeight">初始体重(kg):</label>
            <input v-model="inputWeight">
          </div>
        </div>
        <br>
        <div class="base_font">
          怀孕
          <span class="green">{{weeks}}</span>
          周
          <span class="green">{{days}}</span>
          天
        </div>

        <div class="base_font">
          体重
          <span class="green">{{`${nowWeight[0]} ~ ${nowWeight[1]}`}}</span>
          kg
        </div>
  </main>
</template>

<style>
        body {
            background-color: #000;
            color: #fff;
            font-family: Arial, sans-serif;
            text-align: center;
        }
        label {
            font-weight: bold;
        }
        .input-wrap{
          display: flex;
          justify-content: space-between;
          gap: 1rem;

        }
        .flex-item{
          flex-basis: 50%;
        }
        input {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
        }
        .base_font { 
            color: #fff; 
            font-size: 1.2rem;
            font-family:"Microsoft YaHei";
            margin-bottom: 2rem;
          }
        .green{
            /* font-size: 100px; */
            /* font-family: 'Intro', sans-serif; */
            font-weight: 700;
            text-transform: uppercase;
            font-size: 2.6rem; 
            background: -webkit-linear-gradient(-86deg, #EEF85B 15%, #7AEC8D 53%, #09E5C3 91%);
            -webkit-background-clip: text;
            -webkit-text-stroke: 0.3rem transparent;
            color: #232d2d;
        }
        i{
          speak: none;
          font-style: normal;
          font-weight: 400;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          vertical-align: baseline;
          display: inline-block;
          -webkit-font-smoothing: antialiased;
          display: block;
          font-size: 32px;
          margin-bottom: 15px;
          color: #fff;
          transition: color .15s linear;
        }
        .caret-right{
          content: "\e791";
        }
        .caret-bottom{
          content: "\e790";
        }
        .icon{
          width: 20px;
          height: 20px;
          vertical-align: sub;
        }
</style>
